<template>
  <div class="bottom-view">
    <!--  关键词搜索 card  -->
    <div class="view">
       <el-card shadow="hover">
         <!-- 头部-->
         <template v-slot:header>
           <div class="title-wrapper">
             <div class="title">关键词搜索</div>
           </div>
         </template>

          <!--图表-->
         <div class="chart-wrapper">
           <div class="chart-inner">
             <div class="chart">
               <div class="chart-title">搜索用户数</div>
               <div class="chart-data">{{userCount}}</div>
               <v-chart :options="searchUserOption"/>
             </div>
             <div class="chart">
               <div class="chart-title">搜索量</div>
               <div class="chart-data">{{searchCount}}</div>
               <v-chart :options="searchNumOption"/>
             </div>
           </div>

           <!-- 表格和分页工具  -->
           <div class="table-wrapper">
             <el-table :data="tableData">
               <el-table-column prop="rank" label="排名" ></el-table-column>
               <el-table-column prop="keyword" label="关键词"></el-table-column>
               <el-table-column prop="count" label="总搜索量" ></el-table-column>
               <el-table-column prop="users" label="搜索用户数"></el-table-column>
               <el-table-column prop="range" label="搜索占比" ></el-table-column>
             </el-table>
             <el-pagination  layout="prev,pager,next" :total="total" :page-size="4"
             background @current-change="onPageChange"/>
           </div>
         </div>
       </el-card>
    </div>

    <!--  分类销售排行 card  -->
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <div class="chart-wrapper">
          <v-chart :options="categoryOptions"/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import commonDataMixin from '../../mixins/commonDataMixin'
export default {
  name: 'BottomView',
  mixins: [commonDataMixin],
  data () {
    return {
      searchUserOption: {},
      searchNumOption:{},
      tableData:[],
      radioSelect: '品类',
      totalData:[],
      total:0,
      pageSize:4,
      categoryOptions:{},
      userCount:0,
      searchCount:0
    }
  },
  methods:{
    onPageChange(page){
     this.renderTable(page)
    },
    renderPieChart () {
      const mockData = [
        {
          legendName:'粉面粥店',
          value: 67,
          percent: '15.40%',
          itemStyle:{
            color:'#5085f2'
          },
          name:'粉面粥店 | 15.40%'
        },
        {
          legendName:'简餐便当',
          value: 97,
          percent: '22.30%',
          itemStyle:{
            color:'#8d7fec'
          },
          name:'简餐便当 | 22.30%'
        },
        {
          legendName:'汉堡披萨',
          value: 92,
          percent: '21.15%',
          itemStyle:{
            color:'#e7e702'
          },
          name:'汉堡披萨 | 21.15%'
        },
        {
          legendName:'香锅冒菜',
          value: 72,
          percent: '17.69%',
          itemStyle:{
            color:'#F56C6C'
          },
          name:'香锅冒菜 | 17.69%'
        },
        {
          legendName:'小吃炸串',
          value: 70,
          percent: '17.18%',
          itemStyle:{
            color:'#E6A23C'
          },
          name:'小吃炸串 | 17.18%'
        },
        {
          legendName:'地方菜系',
          value: 33,
          percent: '6.67%',
          itemStyle:{
            color:'#67C23A'
          },
          name:'地方菜系 | 6.67%'
        },
      ]
      this.categoryOptions={
        title:[
          {
            text:'品类分布',
            textStyle:{
              fontSize:14,
              color:"#666"
            },
            left:20,
            top:20
          },
          {
            text:'累计订单量',
            textStyle:{
              fontSize:14,
              color:"#999"
            },
            subtext: '320',
            subtextStyle:{
              fontSize: 28,
              color:"#333"
            },
            x: '35%',
            y: '45%',
            textAlign: 'center',

          }
        ],
        series:[
          {
            name:'品类分布',
            type:'pie',
            data: mockData,
            label:{
              normal:{
                show: true,
                position: 'outer',
                formatter: function (params) {
                  return params.data.legendName
                }
              }
            },
            center:['35%','50%'],
            radius:['45%','60%'],
            labelLine:{
              normal: {
                length:5,
                length2:3,
                smooth:true
              }
            },
            clockwise: true,
            itemStyle:{
              borderWidth:4,
              borderColor:'#fff'
            }
          }
        ],
        legend:{
          type:'scroll',
          orient:'vertical',
          height:250,
          top:'middle',
          left:'70%',
          textStyle:{
            color:'#666'
          }
        },
        tooltip:{
          trigger:'item',
          formatter:function (params){
            const str= params.seriesName +'<br/>'
              +params.marker+params.data.legendName+'<br/>'
              +'数量: '+params.data.value+'<br/>'
              +'占比: '+params.data.percent+'<br/>'
            return str
          }
        }
      }
    },
    renderTable(page){
     this.tableData=this.totalData.slice((page-1)*this.pageSize,(page-1)*this.pageSize+this.pageSize)
    },
    renderLineChart(){
      function createOption (key){
        const data=[]
        const axis=[]

        return {
          xAxis:{
            type:'category',
            boundaryGap:false,
            data:axis
          },
          yAxis:{
            show: false
          },
          series:[
            {
              type:'line',
              data: data,
              areaStyle:{
                color:'rgba(95,187,255,0.5)'
              },
              lineStyle:{
                color: 'rgb(95,187,255)'
              },
              itemStyle:{
                opacity:0
              },
              smooth: true
            }
          ],
          grid:{
            top:0,
            bottom:0,
            left:0,
            right:0
          }
        }
      }
      this.searchUserOption=createOption('user')
      this.searchNumOption=createOption('count')
    }
  },
  mounted () {
    this.renderPieChart()
  },
  watch:{
    wordCloud(){
      const totalData=[]
      this.wordCloud.forEach((item,index)=>{
        totalData.push({
          id: index+1,
          rank:index+1,
          keyword:item.word,
          count:item.count,
          users:item.user,
          range:`${((item.user/item.count)*100).toFixed(2)}%`
        })
      })
      this.totalData=totalData
      this.total=this.totalData.length
      this.renderTable(1)
      this.userCount= this.format(totalData.reduce((s,i)=>i.users+s,0))
      this.searchCount= this.format(totalData.reduce((s,i)=>i.count+s,0))


    }
  }
}
</script>

<style lang='scss' scoped>
.bottom-view{
  margin-top: 20px;
  display: flex;
  .view{
    flex: 1;
    width: 50%;
    box-sizing: border-box;
    &:first-child{
      padding: 0 10px 0 0;
    }
    &:last-child{
      padding: 0 0 0 10px;
    }
    .title-wrapper{
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-weight: 500;
      font-size: 14px;
      padding: 0 20px;
      .radio-wrapper{
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }
    .chart-wrapper{
      display: flex;
      flex-direction: column;
      height: 452px;
      .chart-inner{
        display: flex;
        padding: 0 10px;
        margin-top: 20px;
        .chart{
          flex:1;
          padding: 0 10px;

          .chart-title{
            font-size: 14px;
            color: #999;
          }
          .chart-data{
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          .echarts{
            height: 50px;
          }
        }
      }
      .table-wrapper{
        flex: 1;
        margin-top: 20px;
        padding: 0 20px;
        .el-pagination{
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }

  }
}
</style>
